<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script th:src="@{/layui/layui.js}"></script>
</head>
<style>
    .layui-body-from{
        padding: 30px 15px;
        width: 75%;
        margin: 0 auto 0;
    }
</style>
<body>
<div class="layui-body-from">
    <form class="layui-form" lay-filter="form-submit">
        <div class="layui-form-item" th:if="${nginx != null}">
            <label class="layui-form-label">ID</label>
            <div class="layui-input-block">
                <input type="text" name="id" th:value="${nginx.id}"  disabled lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">服务名称</label>
            <div class="layui-input-block">
                <input type="text" name="serverName" th:value="${nginx != null ? nginx.serverName:''}"  th:disabled="${nginx != null}" oninput="oninputFun(this)" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
        <div class="layui-form-item" th:if="${system eq 1}">
            <label class="layui-form-label">启动路径</label>
            <div class="layui-input-block">
                <input type="text" name="startPath" th:value="${nginx != null ? nginx.startPath:''}" lay-verify="required" placeholder="请输入 如: /usr/load/nginx/sbin/nginx" autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
        <div class="layui-form-item" th:if="${system eq 0}">
            <label class="layui-form-label">启动路径</label>
            <div class="layui-input-block">
                <input type="text" name="startPath" th:value="${nginx != null ? nginx.startPath:''}" lay-verify="required" placeholder="请输入 如: D:\nginx\nginx.exe" autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
        <div class="layui-form-item" th:if="${system eq 1}">
            <label class="layui-form-label">配置路径</label>
            <div class="layui-input-block">
                <input type="text" name="configPath" th:value="${nginx != null ? nginx.configPath:''}" th:attr="lay-affix=${nginx != null ? 'edit':''},lay-filter=${nginx != null ? 'edit':''}" lay-verify="required" placeholder="请输入 如: /usr/load/nginx/nginx.conf" autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
        <div class="layui-form-item" th:if="${system eq 0}">
            <label class="layui-form-label">配置路径</label>
            <div class="layui-input-block">
                <input type="text" name="configPath" th:value="${nginx != null ? nginx.configPath:''}" th:attr="lay-affix=${nginx != null ? 'edit':''},lay-filter=${nginx != null ? 'edit':''}" lay-verify="required" placeholder="请输入 如: D:\nginx\nginx.conf"  autocomplete="off" class="layui-input">
                <span class="layui-font-red"></span>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var submitFun ;
    var oninputFun;
    layui.use(function () {
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        var util = layui.util;

        oninputFun = function (event){
            $(event).next().empty();
        }
        // 定义验证规则
        form.verify({
            // 此处以必填项为例
            required: function(value, item){
                var othis = $(item);
                if(!value){
                    othis.next().html(othis.attr('lay-msg') || '必填项不能为空'); // 在表单旁边给出提示语
                    return true; // 返回 true 阻止 form 组件内部默认的提示方式
                }
                othis.next().empty();
            }
        });
        form.on('input-affix(edit)', function(data){
            var elem = data.elem; // 输入框
            let i = top.layuiTool.layer.open({
                title: false,
                type: 2,
                area: ['75%','95%'],
                content: '/service-web/configFile/'+$('input[name=id]').val()
            });
        });
        function validate(){
            let validate = true;
            $('.layui-form').find('*[lay-verify]').each(function(){
                if (!form.validate(this)) {
                    validate = false;
                }
            });
            return validate;
        }
        submitFun = function (callback,closeLoad){
            if (!validate()) {
                closeLoad();
                return;
            }
            // 提交事件
            form.submit('form-submit', function(data){
                var field = data.field; // 获取表单全部字段值

                // 执行提交
                $.ajax({
                    url:'/service-web/api/'+(field.id ? 'edit' : 'add'),
                    type:'post',
                    dataType: 'json',
                    data: JSON.stringify(field),
                    headers: {
                        'Content-Type':'application/json'
                    },
                    success: function(res){
                        closeLoad();
                        if (res.code == 200){
                            callback();
                        }else {
                            callback(res.message);
                        }
                    },
                    error: function(res){
                        closeLoad();
                        callback("请求错误");
                    }
                })
                return false;
            });
        }

    });
</script>
</html>